<template>
    <div class="box">
        <div class="head">
            <div class="start">
                <img :src="props.icon" class="icon" />
                <span>{{ props.title }}</span>
            </div>
            <div class="end">
                <p class="more" v-if="props.more">
                    {{ t('home_page_more') }}
                </p>
                <div class="swiper-btn" :class="['swiper_pre_game']">
                    <iconpark-icon name="zuo-keyong" size="24" />
                </div>
                <div class="swiper-btn" :class="['swiper_next_game']">
                    <iconpark-icon name="you-keyong" size="24" />

                </div>
            </div>
        </div>
        <div class="body">
            <swiper direction="horizontal" :modules="modules" :navigation="{
                prevEl: '.swiper_pre_game',
                nextEl: '.swiper_next_game'
            }" :autoplay="false" :delay="300000" :loop="false" :disableOnIntercation="false" slidesPerView="auto"
                :spaceBetween="5 - 5" :centeredSlides="true">

                <swiper-slide v-for="(_e, index) of Math.ceil(props.data!.length / (props.row * props.column))"
                    :key="index" class="swiper-slide">
                    <div v-for="(_e, columnIndex) of props.column" :key="columnIndex" class="column">
                        <template v-for="(_rowData, rowIndex) of props.row" :key="rowIndex">
                            <slot name="default"
                                v-if="index * props.row * props.column + columnIndex * props.row + rowIndex < props.data!.length"
                                :data="props.data![index * props.row * props.column + columnIndex * props.row + rowIndex]">
                            </slot>
                        </template>
                    </div>
                </swiper-slide>
            </swiper>

        </div>
    </div>
</template>
<script setup lang="ts">


import { Swiper, SwiperSlide } from 'swiper/vue';

import 'swiper/css';
import 'swiper/css/pagination'
import { Autoplay, Pagination } from 'swiper/modules';
import { useI18n } from 'vue-i18n';
const modules = [Autoplay, Pagination];
const props = defineProps({
    /**
     * 图标
     */
    icon: {
        type: String
    },
    /**
     * 标题
     */
    title: {
        type: String,
    },

    /**
     * 是否显示更多
     */
    more: {
        type: Boolean,
        default: true
    },
    /**
     * 几行
     */
    row: {
        type: Number,
        default: 1
    },
    column: {
        type: Number,
        default: 4
    },
    data: {
        type: Array,

    }
})


const { t } = useI18n();
</script>


<style lang="scss" scoped>
// @import url('swiper/css');

.box {
    display: flex;
    flex-direction: column;
    gap: 12px;

    margin-top: 16px;

    .head {
        display: flex;
        flex-direction: row;
        justify-content: space-between;


        .start,
        .end {
            flex-direction: row;
            gap: 8px;
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 500;
            line-height: 12px;
            text-align: left;
            color: #C6C4F5;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .more {
                background: #282747;
                padding: 6.5px;
                border-radius: 5px;
                box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset;
            }

            .swiper-btn {}
        }

        .start {
            .icon {
                width: 18px;
                height: 18px;
            }
        }
    }

    .body {
        // overflow-x: auto;
        // width: 100%;
        // display: flex;
        // flex-direction: row;
        // gap: 7px;

        .swiper-slide {
            display: flex;
            flex-direction: row;
            gap: 7px;
        }

        .column {
            // width: 90%;
            flex: 1;
            // height: 100px;
            display: flex;
            flex-direction: column;
            // flex: 1;
            // box-sizing: border-box;
            &>*:not(:last-child) {
                margin-bottom: 7px;
            }
        }
    }
}
</style>